<template>
	<view>
		<image class="bg" src="../../static/login_bg.png" mode=""></image>
		<view class="login-box">
			<view class="phone-box">
				<view class="title">
					<image src="../../static/phone.png" mode=""></image>
					<view class="">
						输入手机号
					</view>
				</view>
				<view class="inp">
					<input type="text" placeholder="输入账号"  v-model="userName">
				</view>

				<view class="title">
					<image src="../../static/lock.png" mode=""></image>
					<view class="">
						输入验证码
					</view>
				</view>
				<view class="inp">
					<input type="text" placeholder="输入验证码" v-model="password">
					<view class="code" :class="{forbid:codeTime>0}" slot="right" @click="getCode">
						{{codeTime>0?`${codeTime}s 后重新获取`:'获取验证码'}}
					</view>
				</view>
				<view class="btn" @click="submit">
					登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				codeTime: 0,
				userName:'hdd',
				password:'Dev@2022'
			}
		},
		methods: {
			getCode() {
				this.codeTime = 60
				let time = setInterval(() => {
					if (this.codeTime < 0) return clearInterval(time)
					this.codeTime--
				}, 1000)
			},
			submit(){
				let data={
					userName:this.userName,
					password:this.password
				}
				this.$myRequest('/api/Account/Login',data,'POST').then(res=>{
			
					
					this.$myRequest('/api/authUsers').then(res=>{
						uni.setStorageSync('userData', res);
					})
					uni.setStorageSync('token', res.token.access_token);
					uni.switchTab({
						url:'/pages/index/index'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100vw;
		height: 586rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.login-box {
		background-color: #ffffff;
		border-radius: 42rpx;
		padding: 70rpx 56rpx;
		position: fixed;
		top: 418rpx;
		bottom: 0;
		left: 0;
		right: 0;

		.phone-box {
			.title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;

				image {
					width: 28rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}

			.inp {
				position: relative;
				padding: 20rpx 38rpx;
				background-color: #F1F1F1;
				border-radius: 50rpx;
				margin: 22rpx 0 60rpx 0;

				input {
					height: 50rpx;
				}

				.code {
					height: 64rpx;
					line-height: 64rpx;
					color: #ffffff;
					background-color: #506DFF;
					border-radius: 32rpx;
					position: absolute;
					top: 14rpx;
					right: 22rpx;
					z-index: 9;
					padding: 0 26rpx;
					font-size: 28rpx;
				}

				.forbid {
					color: #999;
					background-color: #ccc;
				}
			}
		}
	}

	.btn {
		height: 92rpx;
		background-color: #506DFF;
		border-radius: 22rpx;
		color: #ffffff;
		line-height: 92rpx;
		text-align: center;
		font-size: 28rpx;
		margin-top: 108rpx;
	}
</style>
